import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { PieCharts, BarTemplate } from '../Template'

import { Pie, Bar } from '@ant-design/plots'
import { project } from '../../../../Common/Data'
import { useRef } from 'react'
import { useSize } from 'ahooks'
import { ModalBox } from '../../../../Common/Modal/ModalBox'
import { useState } from 'react'
const { imageUrl } = project[window.location.hostname]

export const TenA01 = () => {
    const ChartBox = useRef()
    const size = useSize(ChartBox)
    const DataOne = { one: 100, two: 50, thr: 50 }

    const PieColor = [
        'rgba(59, 171, 233, 1)',
        'rgba(59, 215, 233, 1)',
        'rgba(3, 181, 117, 1)',
        'rgba(109, 255, 209, 1)',
        'rgba(139, 255, 109, 1)',
        'rgba(233, 255, 109, 1)',
        'rgba(229, 165, 125, 1)',
    ]

    const PieTwo = [
        { type: '人员信息', value: Math.floor(Math.random() * (10 - 1 + 1)) + 1 },
        { type: '部门信息', value: Math.floor(Math.random() * (10 - 1 + 1)) + 1 },
        { type: '岗位信息', value: Math.floor(Math.random() * (10 - 1 + 1)) + 1 },
        { type: '项目信息', value: Math.floor(Math.random() * (10 - 1 + 1)) + 1 },
        { type: '组织机构', value: Math.floor(Math.random() * (10 - 1 + 1)) + 1 },
        { type: '投资类型', value: Math.floor(Math.random() * (10 - 1 + 1)) + 1 },
        { type: '国家地区', value: Math.floor(Math.random() * (10 - 1 + 1)) + 1 },
    ]

    const ListTwo = [
        { uuid: 1, label: '人员信息' },
        { uuid: 2, label: '部门信息' },
        { uuid: 3, label: '岗位信息' },
        { uuid: 4, label: '项目信息' },
        { uuid: 5, label: '组织机构' },
        { uuid: 6, label: '投资类型' },
        { uuid: 7, label: '国家地区' },
    ]

    const BarData = [
        { type: 'AI管控', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '事务督办', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '安全管控', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '成本管控', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '财务管控', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '视频监控', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '文件管理', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '人员档案', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '物资管控', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
        { type: '智慧梁场 ', 数量: Math.floor(Math.random() * (100 - 1 + 1)) + 1 },
    ]

    const [OptionsCall, setOptionsCall] = useState()

    const Click = uuid => {
        if (uuid === 1)
            setOptionsCall({ type: 'Annex', data: { url: imageUrl + '工建.pdf', title: '文档详情', width: '90vw' } })
    }

    return (
        <>
            <div style={{ flex: 1, marginRight: 16 }}>
                <div>
                    <img src={imageUrl + 'indexL.png'} alt="" />
                    <div>
                        已采集 <span style={{ color: 'rgba(144, 224, 255, 1)' }}>{DataOne.one}</span>
                        万条数据、累计转发 <span style={{ color: 'rgba(89, 255, 182, 1)' }}>{DataOne.two}</span>
                        万数据、接入第三方平台 <span style={{ color: 'rgba(235, 255, 143, 1)' }}>
                            {DataOne.thr}
                        </span>{' '}
                        家。
                    </div>
                </div>
                <div>
                    <CommonSmallTitle title="主数据统计" flex={462} style={{ marginRight: 16 }}>
                        <div className="one">
                            <div>
                                <Pie
                                    {...PieCharts({
                                        size: 180,
                                        data: PieTwo,
                                        color: PieColor,
                                        title: '数量',
                                        statistic: {
                                            title: {
                                                fontSize: 44,
                                                fontFamily: 'Bahnschrift',
                                                fontWeight: 'bold',
                                                color: '#FFFFFF',
                                            },
                                            content: {
                                                fontSize: 20,
                                                fontFamily: 'MicrosoftYaHei',
                                                fontWeight: 'bold',
                                                color: '#5FE9FF',
                                            },
                                        },
                                    })}
                                />
                                <div>
                                    {PieTwo.map(({ type, value }, index) => (
                                        <div key={index}>
                                            <div style={{ background: PieColor[index] }} />
                                            <div>{type}</div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            <div>
                                {ListTwo.map(({ uuid, label }) => (
                                    <div key={uuid}>
                                        <div>{label}</div>
                                        <div>查看信息</div>
                                        <div onClick={() => Click(uuid)}>查看文档</div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </CommonSmallTitle>
                    <CommonSmallTitle title="按类别展示数据量" flex={946}>
                        <div className="two" ref={ChartBox}>
                            {size && (
                                <Bar
                                    {...BarTemplate({
                                        size,
                                        data: BarData,
                                        color: 'rgba(5, 200, 204, 1)',
                                        yTitle: '条',
                                        xField: '数量',
                                    })}
                                />
                            )}
                        </div>
                    </CommonSmallTitle>
                </div>
            </div>
            <div style={{ width: 446 }}>
                <img src={imageUrl + 'TenA01.png'} alt="" />
            </div>
            <ModalBox OptionsCall={OptionsCall} />
        </>
    )
}
